//向服务器请求数据 渲染列表
async function getList() {
  $('tbody').empty()
  const res = await indexAxios('article/cates')
  res.data.data.forEach(item => {
    // console.log('1');
    $(`<tr>
    <td>${item.name}</td>
    <td>${item.alias}</td>
    <td>
      <button myid="${item.Id}" myname="${item.name}" myalias="${item.alias}" type="button" class="layui-btn layui-btn-xs edit">编辑</button>
      <button myid="${item.Id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger delete">删除</button>
    </td>
  </tr>`).appendTo('tbody')
  })
}

getList()



$('.layui-btn-normal').on('click', function () {
  var add_str = `
<form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="add_form">
<div class="layui-form-item">
  <label class="layui-form-label">类别名称</label>
  <div class="layui-input-block">
    <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
  </div>
</div>
<div class="layui-form-item">
  <label class="layui-form-label">类别别名</label>
  <div class="layui-input-block">
    <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
  </div>
</div>
<div class="layui-form-item">
  <div class="layui-input-block">
    <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  </div>
</div>
</form>`;
  // console.log('click');
  let index = layer.open({
    type: 1,
    content: add_str,

    //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
    area: ['500px', '300px'],
    title: '新增类别',
    success: function () {
      //  点击确认提交按钮 上传信息 重新渲染
      $('.add-form').on('submit', async function (e) {
        e.preventDefault()

        const res = await userInfoAxios('article/addcates', $('.add-form').serialize())
        // 添加完毕后 关闭弹出  layer.close(index); 
        layer.close(index)
        // 重新获取一遍数据 得到最新的数据
        getList()
      })

    }
  });
})


//发送服务器删除命令  删除按钮click按钮事件委托 只删除remove  

$('tbody').on('click', '.delete', async function () {
  const res = await indexAxios(`article/deletecate/${$(this).attr('myid')}`)
  $(this).parents('tr').remove()
})


//编辑按钮点击编辑按钮 跳转页面
$('tbody').on('click', '.edit', async function () {








  // console.log($(this).attr('myname'));
  // console.log($(this).attr('myalias'));
  // location.href='../publisher/publisher.html'
  var add_str = `
  <form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="edit_form" lay-filter="edit">
    <div class="layui-form-item">
      <label class="layui-form-label">类别名称</label>
      <div class="layui-input-block">
        <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">类别别名</label>
      <div class="layui-input-block">
        <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <input type="hidden" name="Id">
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit >确认修改</button>
      </div>
    </div>
  </form>`;



  // console.log('click');
  let index = layer.open({
    type: 1,
    content: add_str,

    //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
    area: ['500px', '300px'],
    title: '编辑类别',
    success: () => {

      // 拿到修改数据传给服务器的操作 然后渲染列表


      //数据的回显
      // $('input[name=name]').val(myname)
      // $('input[name=alias]').val(myalias)
      //数据的回显
      layui.form.val("edit", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
        "name": $(this).attr('myname') // "name": "value"
        , "alias": $(this).attr('myalias')

        ,"Id": $(this).attr('myid'),

      });
      //先编辑完成   把编辑的值修改对应表单的值  把更新的值传给服务器
      $('.add-form').on('submit', async (e) => {
        e.preventDefault()
        $(this).parents('tr').find('td').eq(0).text($('input[name=name]').val())
        $(this).parents('tr').find('td').eq(1).text($('input[name=alias]').val())
        // 把更新的值传给服务器

        // let obj = {
        //   Id: $(this).attr('myid'),
        //   name: $('input[name=name]').val(),
        //   alias: $('input[name=alias]').val()
        // }
        const res = await userInfoAxios('article/updatecate',$('.layui-form').serialize())
        layer.close(index)

      })



      // getList()
    }
  });

})
